<template>
  <div class="home-box">
    <div class="header-top">
      <h1>{{ title }}</h1>
    </div>
    <div class="main-box">
      <div class="content-box">
        <!-- 文字内容 -->
        <div class="note-box">
          <textarea rows="5" maxlength="200" name="note" placeholder="这一刻你们的感受.."
                    v-model="note">
          </textarea>
        </div>
        <!-- 图片容器 -->
        <div class="dropify" v-for="imgSrc in imgSrcList" v-bind:key="imgSrc">
          <img v-bind:src="imgSrc" alt="" name="imgContent" v-if="imgSrc">
          <a @click="delImg($index)">删除</a>
        </div>
        <div class="dropify">
          <img  alt="" name="imgContent">
          <p>选择图片</p>
          <input type="file" accept="image/*" multiple="multiple"  @change="uploadImg($event)">
        </div>
        <div class="position-box">
        </div>
      </div>
    </div>
    <div class="option-box">
      <button @click="submit">提交任务</button>
    </div>
    <div class="loading-box" v-show="workduilie>0">
      <span>waiting..</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'upload',
  data () {
    return {
      title: '加载中..',
      site: null,
      note: '',
      imgSrcList: [],
      imgFileList: [],
      form: null,
      loading: false,
      workduilie: 0
    }
  },
  created () {
    this.getContent()
  },
  mounted: function () {
    // this.getLocation()
  },
  methods: {
    getContent: function () {
      this.$http.get('/server/job/getJobDetailByJobId/' + this.$route.params.id)
        .then(function (res) {
          this.site = res.data.data
          this.title = res.data.data.jobName
        })
    },
    uploadImg: function (e) {
      for (let i = 0; i < e.target.files.length; i++) {
        let file = e.target.files[i]
        if (typeof (file) === 'object') {
          this.imgFileList.push(file)
        }
        this.imgSrcList.push(window.URL.createObjectURL(file))
      }
    },
    submit: function () {
      // if (this.note === '') {
      //   alert('请填写这一刻感受！')
      //   return false
      // }
      if (this.workduilie > 0) {
        return
      }
      this.workduilie++
      if (this.imgSrcList.length === 0) {
        alert('你还没上传任务照片！')
        return false
      }
      this.form = new FormData()
      for (let i = 0; i < this.imgFileList.length; i++) {
        this.form.append('img', this.imgFileList[i])
      }
      let requestConfig = {
        header: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.form.append('note', this.note)
      this.$http.post('/server/job/commit?jobId=' + this.$route.params.id,
        this.form, requestConfig)
        .then((res) => {
          this.workduilie = 0
          alert(res.data.msg)
          this.$router.push({name: 'home'})
        })
    },
    delImg: function (index) {
      this.imgSrcList.splice(index, 1)
      this.imgFileList.splice(index, 1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .home-box{
    position: relative;
    height: 100%;
    width: 100%;
    padding: 10px;
    background-image: url(../assets/longFlower.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    overflow-y: auto;
  }
  @media screen and (max-width: 600px) {
    .home-box{
      background-image: url(../assets/flower.jpg);
    }
  }
  .header-top{
    position: relative;
  }
  .header-top>h1{
    margin-right: 40%;
    padding-left: 10px;
    line-height: 50px;
    font-size: 24px;
    color: #fff;
    text-align: left;
    font-weight: 700;
  }
  .score-display>span{
    display: block;
    height: 40%;
    line-height: initial;
    color: #fff;
    font-size: 14px;
  }
  .score-display>b{
    display: block;
    height: 60%;
    line-height: initial;
    color: #FFCC00;
    font-size: 28px;
  }
  .main-box{
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 10px 30px;
    margin-top: -2px;
    background: rgba(166, 173, 197, 0.5);
    border: 1px solid #000;
  }
  .content-box{
    line-height: 1.5em;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    color: #fff;
  }
  .note-box{
    padding-bottom: 10px;
  }
  .note-box>textarea{
    width: 100%;
    color: #fff;
    background: none;
    border:none;
    outline:none;
  }
  .note-box>textarea::-webkit-input-placeholder{
    color: #c1c1c1;
  }
  .dropify{
    float: left;
    position: relative;
    width: 50%;
    height: 0;
    padding-top: 37.5%;
    border:1px solid #c2c2c2;
    cursor: pointer;
    box-sizing: border-box;
    transition-duration: 200ms;
  }
  .dropify:hover{
    border-color: #eeff2a;
  }
  .dropify>img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
  }
  .dropify>p{
    position: absolute;
    top: 50%;
    margin-top: -10px;
    line-height: 20px;
    width: 100%;
    font-size: 14px;
    text-align: center;
  }
  .dropify>input[type=file]{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 3;
  }
  .dropify>a{
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 5px 10px;
    z-index: 4;
    background: #F36707;
    border-radius: 5px;
  }
  .dropify>a:hover{
    background: #f30b0b;
  }
  .position-box{
    clear: both;
  }
  .option-box{
    margin-top: 20px;
  }
  .option-box>button{
    padding: 5px 15px;
    border-radius: 5px;
    border: none;
    background: #ff9036;
    color: #fff;
    box-shadow: .01rem .01rem .1rem rgba(0, 0, 0, .5), 0 0 .05rem rgba(240, 240, 240, .5), .05rem .05rem .01rem rgba(255, 255, 255, .15) inset, .1rem .1rem .1rem rgba(255, 255, 255, .05) inset, -.05rem -.05rem .25rem rgba(0, 0, 0, .15) inset, -.1rem -.1rem .35rem rgba(0, 0, 0, .05) inset;
    font-size: 14px;
    transition-duration: 200ms;
    cursor: pointer;
    outline: none;
  }
  .option-box>button:hover,.option-box>button:active{
    background: #ffb601;
  }
  .loading-box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff8a;
    text-align: center;
    z-index: 999;
  }
  .loading-box span{
    position: relative;
    vertical-align: middle;
    animation:moveRight 3s infinite;
    -webkit-animation:moveRight 3s infinite; /*Safari and Chrome*/
  }
  @keyframes moveRight
  {
    0% {top:0}
    25% {top:20px;}
    50% {top: 0;}
    75% {top:-20px;}
    100% {top: 0;}
  }

  @-webkit-keyframes moveRight /*Safari and Chrome*/
  {
    from {left:0px;}
    to {left:200px;}
  }
  .loading-box span:after{
    content: "";
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }
</style>
